<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-语法速通'"></Breadcrumb>
        <RouterTabs :list="routerList" :current="2"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="table">
              <u-table
                bg-color="rgba(84, 188, 241, 0.5)"
                border-color="#ffffff"
                font-size="28"
                color="#ffffff"
                padding="20rpx 0"
              >
                <u-tr>
                  <u-th width="25%">知识点</u-th>
                  <u-th>题目总量</u-th>
                  <u-th>错误</u-th>
                  <u-th>错误率</u-th>
                  <u-th>操作</u-th>
                </u-tr>
                <u-tr v-for="(item, index) in tableList" :key="index">
                  <u-td width="25%">{{ item.conceptName }}</u-td>
                  <u-td>{{ item.totalNum }}</u-td>
                  <u-td>{{ item.errorNum }}</u-td>
                  <u-td
                    ><text style="color: #d68f29"
                      >{{ (item.errorNum / item.totalNum) * 100 }}%</text
                    ></u-td
                  >
                  <u-td
                    ><text style="color: #f90000" @click="handleConquer(item)"
                      >攻克难题</text
                    ></u-td
                  >
                </u-tr>
              </u-table>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getWrongReport } from "@/api/grammar";
export default {
  components: {},
  filters: {
    periodFilter(status) {
      const statusMap = {
        1: "小学语法专项训练",
        2: "初中语法专项训练",
        3: "高中语法专项训练",
        4: "中考押题语法训练",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      routerList: [
        {
          name: "语法框图",
          url: "pages/grammar/grammarDiagram",
        },
        {
          name: "自主组卷",
          url: "pages/grammar/grammarPaper",
        },
        {
          name: "错题本",
          url: "pages/grammar/grammarBook",
        },
      ],
      tableList: [],
      period: "1",
      periodList: [
        {
          value: "1",
          label: "小学语法专项训练",
        },
        {
          value: "2",
          label: "初中语法专项训练",
        },
        {
          value: "3",
          label: "高中语法专项训练",
        },
        {
          value: "4",
          label: "中考押题语法训练",
        },
      ],
      periodShow: false,
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      // default
      this.getReport();
    },
    handleChangePeriod(e) {
      if (e[0].value === this.period) return;
      this.period = e[0].value;
      this.getReport();
    },
    getReport() {
      let params = {
        period: this.period,
      };
      getWrongReport(params).then((res) => {
        this.tableList = res.data;
      });
    },
    handleConquer(row) {
      uni.navigateTo({
        url: `/pages/grammar/grammarBookDetail?id=${row.conceptId}&period=${this.period}`,
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./grammarBook";
</style>
